<template>
  <div>

    <basic-container>
      <el-form :inline="true" >
        <div style="margin-top: 22px">
          <el-form-item style="margin-top: -3px">
            <el-radio-group  v-model="tabPositionThird" @change="handleClickThird">
              <el-radio-button
                :label="level" v-if="level < 4">本账号
              </el-radio-button>
              <el-radio-button label="3" v-if="level<3">组长</el-radio-button>
              <el-radio-button label="4" v-if="level<4">推广员</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="level < 4">
            <el-select v-model="userId" clearable :placeholder="userPlaceholder" @change="selectUserIdHandle">
              <el-option :label="item.account" :value="item.id" v-for="(item,index) in userList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!--          <el-select v-model="projectId" clearable placeholder="请选择游戏" filterable @change="selectGameIdHandle">-->
            <!--            <el-option :label="item.name" :value="item.id" v-for="(item,index) in gameProjectList"-->
            <!--                       :key="index"></el-option>-->
            <!--          </el-select>-->
            <el-select v-model="projectId" @change="selectGameIdHandle" filterable clearable placeholder="游戏">
              <el-option
                v-for="item in gameProjectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryGameResource">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="item.lable" :name="item.name" v-for="(item,index) in tabList" :key="index"></el-tab-pane>
      </el-tabs>

      <div style="clear: both"></div>
      <div>
        <gameIndex style="margin-bottom: 10px" :userId="userId" :activeName="activeName" :gameData="item"
                   v-for="(item,index) in gameDataList" :key="index" @refreshData="refreshDataHandle"
                   @timingRequest="timingRequest"></gameIndex>
      </div>

      <div class="block" style="margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[2, 10, 20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>

    </basic-container>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
import user from "@/store/modules/user"
import {getLeadList, getPromoter} from "@/api/system/user"
import {getGameProjectAll, getGameList, getMyGameList} from '@/api/game/gamePromote'

import gameIndex from "@/components/game/index"
import VueElementLoading from 'vue-element-loading'
import {gameList} from "@/api/game/game";


export default {
  name: "rabate",
  data() {
    return {
      isActive: false,
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0,
      },
      typeId: 3,
      userId: null,
      osType: null,
      projectId: null,
      gameProjectList: null,
      gameDataList: null,
      userPlaceholder: '',
      level: user.state.promoteInfo.level,
      activeName: 'fourth',
      tabPositionThird: user.state.promoteInfo.level,
      userList: null,
      tabList: [
        {lable: '我的游戏', name: 'fourth', osType: null},
        {lable: '全部游戏', name: 'first', osType: null},
        {lable: 'iOS游戏', name: 'second', osType: 1},
        {lable: '安卓游戏', name: 'third', osType: 2}
      ],
      timingRequestInstant: null,
    }

  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  components: {
    gameIndex,
    VueElementLoading
  },
  created() {
  },
  beforeDestroy() {
    this.closeInterval()
  },
  mounted() {

    this.userId = user.state.userInfo.userId

    this.handleClickThird(this.level)
    // getGameProjectAll().then(res => {
    //   this.gameProjectList = res.data.data
    // })
    gameList().then(res => {
      const data = res.data.data;
      this.gameProjectList = data;
    });
    this.gameList()
  },
  methods: {
    timingRequest() {
      this.openInterval()
    },
    refreshDataHandle() {
      this.gameList()
    },

    selectGameIdHandle(projectId) {
      this.projectId = projectId
    },
    selectUserIdHandle(userId) {
      this.userId = userId
    },
    queryGameResource() {
      this.gameList()
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.gameList()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.gameList()
    },
    handleClick(tab, event) {
      console.log(tab, event)
      this.osType = this.tabList[tab.index].osType
      this.activeName = tab.name
      this.page.currentPage = 1
      this.gameList()
    },
    /**
     * 获取推广员列表
     * @param tab
     * @param event
     */
    handleClickThird(tab) {
      if(tab==4){
        getPromoter(1,tab).then(res => {
          this.userList = res.data.data
        })
      }else{
        getLeadList(1, tab).then(res => {
          this.userList = res.data.data
        })
      }
      const userPlaceholderArr = ['推广商账号', '组长账号', '推广员账号']
      this.userPlaceholder = userPlaceholderArr[tab - 2]
      this.userId = null
      if (tab === this.level) {
        this.userId = user.state.userInfo.userId
      }
    },
    gameListCallback(res) {
      const data = res.data.data
      this.gameDataList = data.records
      this.page.total = data.total
      console.log(res)
      let timingRequestFlag = true;
      this.gameDataList.forEach(gameData => {
        if (gameData.subpackage === 3) {
          timingRequestFlag = false
        }
      })

      if (timingRequestFlag && this.timingRequestInstant != null) {
       this.closeInterval()
      } else if (this.timingRequestInstant == null && this.activeName=='fourth') {
        this.openInterval()
      }
    },

    /**
     * 获取游戏资源包列表
     * @param userId
     * @param projectId
     */
    gameList() {
      if (this.userId === null || this.userId === 0 || this.userId === "") {
        this.$message.error('请先选择用户')
        this.closeInterval()
        return
      }
      console.log("userId", this.userId)

      let params = {
        "userId": this.userId,
        "projectId": this.projectId,
        "osType": this.osType,
        "typeId": this.typeId
      }
      this.isActive = true
      if (this.activeName === 'fourth') {
        getMyGameList(this.page.currentPage, this.page.pageSize, params).then(res => {this.isActive = false; this.gameListCallback(res)})
      } else {
        getGameList(this.page.currentPage, this.page.pageSize, params).then(res => {this.isActive = false; this.gameListCallback(res)})
      }
    },

    openInterval() {
      this.closeInterval()
      this.timingRequestInstant = setInterval(() => this.gameList(), 5000)
    },

    closeInterval() {
      clearInterval(this.timingRequestInstant)
      this.timingRequestInstant = null
    },
  }
  ,

}
</script>

<style scoped>

</style>
